<template>
    <el-row :gutter="0" style="display: flex;align-items: center;margin-left: 1%;">
      <span style="font-weight: bold;color: #606266; margin-right: 10px;">账号</span>
      <el-input size="large" v-model="condition.userName" style="width: 240px" placeholder="请输入账号" />
      <span style="font-weight: bold;color: #606266; margin-right: 10px;">昵称</span>
      <el-input size="large" v-model="condition.nickName" style="width: 240px" placeholder="请输入昵称" />
      <span style="font-weight: bold;color: #606266; margin-right: 10px;">电话</span>
      <el-input size="large" v-model="condition.phone" style="width: 240px" placeholder="请输入电话" />
      <span style="font-weight: bold;color: #606266; margin-right: 10px;">邮件</span>
      <el-input size="large" v-model="condition.email" style="width: 240px" placeholder="请输入邮件" />
      
      <span style="font-weight: bold;color: #606266; margin-right: 10px;">角色</span>
      <!-- 角色 -->
<!-- {{ roleoptionsvalue }} -->
      <el-select clearable :change="changerole()"  v-model="roleoptionsvalue" placeholder="角色" size="large" style="width: 240px">
      <el-option v-for="item in roleoptions" :key="item.id" :label="item.role" :value="item.id"/>
    </el-select>
    </el-row>
    <el-row style="margin-top: 20px;" justify="space-between">
      <el-col :span="10">
        <el-button type="primary" style="margin: 0 15px;"  @click="search">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </el-button>
        <el-button type="primary" style="margin: 0 15px;"  @click="toadd">
          <el-icon>
            <Plus />
          </el-icon>
          新增
        </el-button>
      </el-col>
    </el-row>
    <el-row style="padding-top: 20px;">
      <sysUserManagementTable :sysuser="sysuser" @delete="deleteid" @edit="toedit"/>
      <el-pagination
      v-model:current-page="condition.pagenum"
      v-model:page-size="condition.pagesize"
      :page-sizes="[10,20,30,40,50]"
      size="large"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totle"
     
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </el-row>
    <el-dialog :title="title" width="600px" v-model="visible" @close="onClose">
      <!-- 表单 -->
    <el-form :model="sysuserdata" >
      <el-form-item label="编号" prop="id" v-if="title=='编辑'?true:false" >
        <el-input placeholder="请填写id" :maxLength="20" v-model="sysuserdata.id"></el-input>
      </el-form-item>
      <el-form-item label="账户" prop="userName" >
        <el-input placeholder="请填写账户"  v-model="sysuserdata.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" >
        <el-input placeholder="请填写密码"  v-model="sysuserdata.password"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickName" >
        <el-input placeholder="请填写昵称"  v-model="sysuserdata.nickName"></el-input>
      </el-form-item>
      <el-form-item label="邮件" prop="email" >
        <el-input placeholder="请填写邮件"  v-model="sysuserdata.email"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone" >
        <el-input placeholder="请填写手机"  v-model="sysuserdata.phone"></el-input>
      </el-form-item>
      <el-form-item label="图片URL" prop="img">
    <el-upload
      v-model:file-list="fileList"
      :action="uploadUrl"
      :onRemove="remove"
      :onSuccess="success"
      list-type="picture-card"
    >
    <el-icon><Plus /></el-icon>
    </el-upload>
    <el-input placeholder="图片URL" v-model="sysuserdata.img"></el-input>
  </el-form-item>
      <!-- {{ sysuserdata.role }} -->
      <el-form-item label="角色" prop="role" >
       <el-select v-model="sysuserdata.role" placeholder="选择角色" clearable>
         <el-option
           v-for="item in roleoptions"
           :key="item.id"
           :label="item.role"
           :value="item.id"
         ></el-option>
       </el-select>
      </el-form-item>
 
    </el-form>
        <!-- 表单 -->
  
      <template #footer>
        <div class="dialog-footer">
           <el-button size="default" @click="onClose">取 消</el-button>
           <el-button size="default" type="primary" @click="handleOk" >确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  <script setup>
import sysUserManagementTable from '@/components/sysUserManagement/sysUserManagementTable.vue';
  import axios from 'axios';
  import { onMounted, reactive, ref } from 'vue';
    // 初始化加载数据
onMounted(() => {
 star()
  })
  function star(){
   return axios.post('SystemUser/selectAll', condition).then(res => {
    console.log("初始数据",res.data.data)
    sysuser.value = res.data.data.list;
    totle.value=res.data.data.total
  }).catch(err=>{
    alert(err.data)
  })

  }
  // 分页
 async function handleSizeChange(val) {
  console.log('大XIAO',val);
  console.log("条件大小",condition.pagesize
  );
   await star()
  
  }
  async function handleCurrentChange(val) {
    console.log("当前页",val);
    console.log("条件当前也",condition.pagenum
    );
    
   await star()
  }
  let totle=ref(0)
  // 定义数据对象
  let sysuser=ref([])
  // 定义条件对象
  let condition = reactive({
    pagenum: 1,
    pagesize: 10,
    id: 0,
    userName: '',
    password: '',
    nickName: '',
    email: '',
    phone: '',
    img: '',
    role:0
  })
  let roleoptionsvalue=ref()
let roleoptions=ref([
  {
    id:1,
    role:'管理员'
  },
  {
    id:2,
    role:'咨询师'
  }
])

 
  function changerole(){
    console.log('roleoptionsvalue',roleoptionsvalue.value)
    condition.role=roleoptionsvalue.value
   }
  // 接收删除参数
  function deleteid(id){
  axios.post('SystemUser/delete',{did:id,...condition}).then(res=>{
  console.log('res.data.data',res.data.data);
  if(res.data.code==2){
    alert(res.data.msg) 
  }else{
    sysuser.value=res.data.data.list;
    totle.value=res.data.data.total
  }
  }).catch(err=>{
    alert(err)
  })
  }
  // 查询
  function search(){
    axios.post('/SystemUser/selectAll',condition).then(res=>{
      console.log('res.data.data',res.data.data);
  if(res.data.code==2){
    alert(res.data.msg) 
  }else{
    sysuser.value=res.data.data.list
    totle.value=res.data.data.total
  }}).catch(err=>{
      alert(err)
    })
  }
  // 弹窗数据
  let visible=ref(false)
  let title=ref('')
  let sysuserdata=reactive({
    id: 0,
    userName: '',
    password: '',
    nickName: '',
    email: '',
    phone: '',
    img: '',
    role:0
  })
  let fileList=ref([])
  let uploadUrl='http://localhost:8080/file/upload'
  function success(response,uploadfile){
    console.log('得到的文件名',response.data);
  sysuserdata.img=response.data
  
  }
  function remove(){
    sysuserdata.img=''
  }
  function toedit(row){
    visible.value=true
    title.value='编辑'
  sysuserdata=reactive(row)
  sysuserdata.password=''
  fileList.value = [{
      name: row.img,
      url: 'http://localhost:8080/file/downLoad?fileName='+row.img
    }]
  }
  function toadd(){
  visible.value=true
  title.value='添加'
  }
  async function handleOk(){
    if(title.value=='添加'){
      let aa=()=>{
        let sys=  JSON.stringify(sysuserdata)
    return axios.post('/SystemUser/insert',{SystemUser:sys,...condition}).then(res=>{
      if(res.data.code==2){
        alert(res.data.msg) 
      }else{
        sysuser.value=res.data.data.list 
        totle.value=res.data.data.total
      }
    }).catch(err=>{
  alert(err)
    })
  }
  await aa();
    }
  if(title.value=='编辑'){
    let bb= ()=>{
let sys=  JSON.stringify(sysuserdata)
      return axios.post('/SystemUser/update',{SystemUser:sys,...condition}).then(res=>{
      
        if(res.data.code==2){
          alert(res.data.msg)
        }else{
          sysuser.value=res.data.data.list
          totle.value=res.data.data.total
        }
      }).catch(err=>{
        alert(err)
      })
    }
    await bb()
  }
  sysuserdata=reactive({
    id: 0,
    userName: '',
    password: '',
    nickName: '',
    name: '',
    sex: '',
    phone: '',
    img: ''
  })
  fileList.value=[]
    visible.value=false
  }
  function onClose(){
  visible.value=false
  sysuserdata=reactive({
    id: 0,
    userName: '',
    password: '',
    nickName: '',
    name: '',
    sex: '',
    phone: '',
    img: ''
  })
  fileList.value=[]
  }
  
  </script>